<template>
  <page-layout :avatar="currUser.avatar">
    <div slot="headerContent">
      <div class="title">{{ welcome.timeFix[lang] }}，{{ currUser.name }}，{{ welcome.message[lang] }}</div>
      <div>{{ currUser.position[lang] }}</div>
    </div>
    <template slot="extra">
      <head-info class="split-right" :title="$t('project')" content="56"/>
      <head-info class="split-right" :title="$t('ranking')" content="8/24"/>
      <head-info class="split-right" :title="$t('visit')" content="2,223"/>
    </template>
    <template>
      <a-row>
        <a-row>
          <a-col span="12">
            <first-card
                v-for="item in firstData"
                :key="item.key"
                :objData="item"
                :add="handleAdd"
                :del="handleDel"
                :handleSecond="openModal"
            ></first-card>
          </a-col>
        </a-row>
      </a-row>
      <a-modal
          title="选择内容"
          :destroyOnClose="true"
          :width="500"
          :visible="modalVisible"
          @cancel="handleCancel"
          @ok="handleOk"
      >
        <second-card
            :selectValue="handleSelectValue"
        ></second-card>
      </a-modal>
    </template>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import HeadInfo from '@/components/tool/HeadInfo'
import {mapState} from 'vuex'
import {request, METHOD} from '@/utils/request'
import FirstCard from "./FirstCard";
import SecondCard from "@/pages/dashboard/workplace/SecondCard";

export default {
  name: 'WorkPlace',
  components: {SecondCard, FirstCard, HeadInfo, PageLayout},
  i18n: require('./i18n'),
  data() {
    return {
      projects: [],
      loading: true,
      activities: [],
      teams: [],
      welcome: {
        timeFix: '',
        message: ''
      },
      autoKey: 1,
      currentKey: undefined,
      currentValue: undefined,
      modalVisible: false,
      firstData: [{key: 0, name: '请选择'}]
    }
  },
  computed: {
    ...mapState('account', {currUser: 'user'}),
    ...mapState('setting', ['lang'])
  },
  created() {
    request('/user/welcome', METHOD.GET).then(res => this.welcome = res.data)
  },
  methods: {
    openModal(key) {
      this.currentKey = key
      this.modalVisible = true
    },
    handleOk() {
      let temp = []
      for (let first of this.firstData) {
        if(first.key == this.currentKey){
          temp.push({key: this.currentKey, name: '当前值为'+this.currentValue})
        }else {
          temp.push(first)
        }
      }
      this.firstData = temp
      this.handleCancel()
    },
    handleCancel() {
      this.modalVisible = false
    },
    handleAdd() {
      this.firstData.push({key: this.autoKey, name: '请选择'})
      this.autoKey += 1
    },
    handleDel(key) {
      if (this.firstData.length > 1) {
        let temp = []
        for (let first of this.firstData) {
          if (first.key == key) {
            continue
          } else {
            temp.push(first)
          }
        }
        this.firstData = temp
      }
    },
    handleSelectValue(value){
      this.currentValue = value
    }
  }
}
</script>

<style lang="less">
@import "index";
</style>
